<!--
  Generated template for the AddLabelPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<!-- <ion-header>

  <ion-navbar>
    <button ion-button icon-only (click)="diss()">
        <ion-icon name="arrow-back"   style="padding-right: 5px; font-size: 26px;color: black;" ></ion-icon>
    </button>
    <ion-title>添加标签</ion-title>
    <ion-buttons end>
      <button ion-button icon-only style="margin-right: 5px;">
             <span style="color: red;">确定</span>
           </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>
<ion-content padding>
  <div class="cont1">
    <span class="style">甲型</span>
    <div class="btn">
      <div class="btns1">
        <div class="text1" *ngFor="let type of types, let i = index" (click)="style(i)">{{type.type_name}}</div>
      </div>
    </div>
  </div>
  <div class="cont2">
    <span class="style1">风格</span>
    <div class="btn">
      <div class="btns2">
        <div class="text2" *ngFor="let hand of hands, let i = index" (click)="style1(i)">{{hand.type_name}}</div>
      </div>
    </div>
  </div>
</ion-content> -->





<ion-header title="首页" style="background: #fff!important">
  <ion-navbar style="background: #fff!important">
    <button ion-button style="padding-left: 1px;background: #fff;" class="button-ios-city" (click)="openCitiChoose()">
      <ion-icon style="margin-left:3px;font-size:18px;color: #ccc;position: absolute;top: 5px" name="md-pin"></ion-icon>
        <span style="color: rgb(102, 102, 102);font-size: 14px;margin-top: 20px;margin-left: 8px;">{{currCity.substr(0,2)}} </span>
    </button>

    <ion-title>
      <ion-searchbar disabled="true" [(ngModel)]="myInput" (click)="gotoSearch()" searchbar-ios-input-placeholder-color='black' placeholder="找款式、美甲师、店铺">
      </ion-searchbar>
    </ion-title>
    <!--<ion-buttons end>
      <button ion-button icon-only>
         <ion-icon name="md-camera" color="#ffffff" style="padding-right: 5px; font-size: 26px;" ></ion-icon>
       </button>
    </ion-buttons>-->
  </ion-navbar>
  <!--<ion-slides pager style="height: 200px" loop autoplay="1500">

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg" style="width: 100%" alt="">
    </ion-slide>

    <ion-slide>
      <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/3_328.jpg" style="width: 100%" alt="">
    </ion-slide>

  </ion-slides>
  <div class="bats">
    <div class="bat1"><button active value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/shangcheng-@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>商城</span></div>
    <div class="bat2"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/jiuye@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>就业</span></div>
    <div class="bat3"><button value="recommend" (ionSelect)="selectFunc('RcmdPage')"><img src="../../assets/img/ios/peixun@2x.png" style="width: 50px;height: 50px;" alt=""></button><br><span>培训</span></div>
  </div>-->
</ion-header>

<ion-content #container has-header>
  <ion-nav [root]="contentArea" #content swipeBackEnabled="true"></ion-nav>
</ion-content>

<ion-menu type="overlay" [content]="container" side="right" class="right">
  <ion-content>
    <ion-list>
      <!-- center text-center  -->
      <ion-item select *ngFor="let p of otherStyleList" (click)="showMoreStyle(p)" [style.color]="p.selected?'#fd6186':'#000000'">
        {{p.type_name}}</ion-item>
    </ion-list>

    <div>
      <span>流行新款</span><br>
      <div class="cont2" >
        <div class="btns" (click)="style(i)" *ngFor="let type of types, let i = index">{{type.type_name}}<img class="rem1" (click)="rem1(i)" src="../../assets/img/ios/guanbi@3x.png"></div>
      </div>
    </div>
    <hr>
    <div>
      <span>手法</span><br>
      <div class="cont2">
        <div class="btns1" (click)="style1(i)" *ngFor="let hand of hands, let i = index">{{hand.type_name}}<img class="rem2" (click)="rem2(i)" src="../../assets/img/ios/guanbi@3x.png"></div>
      </div>
    </div>
    <hr>
    <div >
      <span>材料</span><br>
      <div class="cont2">
        <div class="btns2" (click)="style2(i)" *ngFor="let tool of tools, let i = index">{{tool.type_name}}<img class="rem3" (click)="rem3(i)" src="../../assets/img/ios/guanbi@3x.png"></div>
      </div>
    </div>
    <hr>
    <div class="btn1">
      <div class="btn2 active" (click)="all()">
        重置
      </div>
      <div class="btn2">
        完成
      </div>
    </div>
  </ion-content>
</ion-menu>

